<template>
  <view>
    <u-modal v-model="popShow" :content="popMsg" show-cancel-button @confirm="onConfirm"></u-modal>
    
    <view class="flex-row align-center padding-lr bg-white">
      <image class="icon" :src="company.picture"></image>
      <view class="text-cut text-xl text-bold text-black">{{company.company_name}}</view>
    </view>
    
    <view class="padding-sm flex-row justify-around bg-white" style="width: 100%;">
      <my-btn width="200" height="60" inline size="28" @click="$goto('/pages/enterprise/edit?id=' + id)" v-if="auth[2]">编辑信息</my-btn>
      <my-btn width="200" height="60" inline size="28" @click="showPop('dismiss')" v-if="auth[1]">解散公司</my-btn>
      <my-btn width="200" height="60" inline size="28" @click="showPop('quit')" v-if="!auth[1] && !loading">退出公司</my-btn>
    </view>

    <view class="block new-member" v-if="newMember && auth[2]">
      <view class="left">
        申请列表：
      </view>
      <view class="right" @click="$goto(`/pages/enterprise/audit?id=${id}`)">
        <view class="cell">
          新成员<u-tag :text="newMember" type="success" mode="dark" shape="circle" size="mini" />
        </view>
      </view>
    </view>
    
    <u-gap height="8"></u-gap>
    
    <view class="block" v-if="member">
      <view class="left">
        企业成员：
      </view>
      <view class="right">
        <!-- 超级管理 -->
        <uni-swipe-action>
          <uni-swipe-action-item v-for="(i, k) in manager" :key="i.id" :right-options="[]" @click="onClick(i, $event)"
            :disabled="auth[0] == 0">
            <view class="cell">
              <u-avatar class="margin-right-sm" :src="i.member.portrait" size="64" :show-level="i.manager > 0"
                level-icon="account-fill" :level-bg-color="i.manager == 2 ? '#ffc707' : '#1268fd'"></u-avatar>
              <text class="text-cut">{{i.member.nickname}}</text>
            </view>
          </uni-swipe-action-item>
        </uni-swipe-action>
        <!-- 管理员 -->
        <uni-swipe-action>
          <uni-swipe-action-item v-for="(i, k) in submanager" :key="i.id" :right-options="submanagerOptions" @click="onClick(i, $event)"
            :disabled="auth[1] == 0">
            <view class="cell">
              <u-avatar class="margin-right-sm" :src="i.member.portrait" size="64" :show-level="i.manager > 0"
                level-icon="account-fill" :level-bg-color="i.manager == 2 ? '#ffc707' : '#1268fd'"></u-avatar>
              <text class="text-cut">{{i.member.nickname}}</text>
            </view>
          </uni-swipe-action-item>
        </uni-swipe-action>
        <!-- 普通用户 -->
        <uni-swipe-action>
          <uni-swipe-action-item v-for="(i, k) in commonmember" :key="i.id" :right-options="commonmemberOptions" @click="onClick(i, $event)"
            :disabled="auth[2] == 0">
            <view class="cell">
              <u-avatar class="margin-right-sm" :src="i.member.portrait" size="64" :show-level="i.manager > 0"
                level-icon="account-fill" :level-bg-color="i.manager == 2 ? '#ffc707' : '#1268fd'"></u-avatar>
              <text class="text-cut">{{i.member.nickname}}</text>
            </view>
          </uni-swipe-action-item>
        </uni-swipe-action>
      </view>
    </view>

    <u-modal v-model="modelShow" :content="modelContent" @confirm="modelConfirm" show-cancel-button></u-modal>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        id: '',
        loading: false,
        company: '',
        auth: [0, 0, 0],
        member: [],
        newMember: 0,
        submanagerOptions: [{
          text: '取消管理员',
          style: {
            backgroundColor: '#007aff'
          }
        }, {
          text: '移除成员',
          style: {
            backgroundColor: '#dd524d'
          }
        }],
        commonmemberOptions: [{
          text: '设为管理员',
          style: {
            backgroundColor: '#007aff'
          }
        }, {
          text: '移除成员',
          style: {
            backgroundColor: '#dd524d'
          }
        }],
        modelShow: false,
        modelContent: '',
        handleId: 0,
        handle: '',
        popShow: false,
        popHandle: '',
        popMsg: ''
      };
    },
    computed: {
      manager() {
        return this.member.filter((item) => item.manager == 2)
      },
      submanager() {
        return this.member.filter((item) => item.manager == 1)
      },
      commonmember() {
        return this.member.filter((item) => item.manager == 0)
      }
    },
    onLoad(opt) {
      this.id = opt.id
    },
    onShow() {
      this.getDetail()
      this.getList()
    },
    onPullDownRefresh() {
      this.getList()
    },
    methods: {
      async getDetail() {
        this.loading = true
        let { company } = await this.$u.api.getCompanyDetail(this.id)
        this.company = company
        this.loading = false
      },
      async getCheck() {
        let res = await this.$u.get('/company/create/check?id=' + this.id)
        let {
          msg,
          result
        } = res.data
      },
      async getList() {
        let res = await this.$u.get('/company/manager/list?id=' + this.id)
        let {
          msg,
          result
        } = res.data
        let {
          auth,
          member,
          apply
        } = result
        this.auth = auth
        this.member = member
        this.newMember = apply
        uni.stopPullDownRefresh()
      },
      onClick(item, e) {
        let handle = e.content.text
        let name = item.member.nickname
        this.handleId = item.member_id
        this.handle = handle
        this.modelContent = `是否把'${name}'${handle}？`
        this.modelShow = true
      },
      modelConfirm() {
        if (this.handle.indexOf('管理员') > -1) {
          let params = {
            member_id: this.handleId,
            type: this.handle == '设为管理员' ? 2 : 1,
            id: this.id
          }
          this.setManager(params)
        }
        if (this.handle.indexOf('移除') > -1) {
          let params = {
            member_id: this.handleId,
            id: this.id
          }
          this.delMember(params)
        }
      },
      async setManager(params) {
        let res = await this.$u.post('/company/manager/update', params)
        let {
          msg,
          result
        } = res.data
        this.$msg(msg)
        this.getList()
      },
      async delMember(params) {
        let res = await this.$u.post('/company/member/delete', params)
        let {
          msg,
          result
        } = res.data
        this.$msg(msg)
        this.getList()
      },
      async dismiss() {
        let params = {
          id: this.id
        }
        let res = await this.$u.post('/company/dismiss', params)
        let { msg, result } = res.data
        this.$msg(msg, 1000, true).then(res => this.$goto(1))
      },
      async quit() {
        let params = {
          id: this.id
        }
        let res = await this.$u.post('/company/quit', params)
        let { msg, result } = res.data
        this.$msg(msg, 1000, true).then(res => this.$goto(1))
      },
      showPop(type) {
        let typeList = ['dismiss', 'quit']
        this.popHandle = type
        this.popMsg = type == 'dismiss' ? '确定要解散公司？' : '确定要退出公司？'
        this.popShow = true
      },
      onConfirm() {
        if (this.popHandle == 'dismiss') {
          this.dismiss()
        } else if (this.popHandle == 'quit') {
          this.quit()
        }
      }
    }
  }
</script>

<style lang="scss">
  .icon {
    width: 60rpx;
    height: 60rpx;
    object-fit: cover;
    margin: 16rpx;
  }
  
  .new-member {
    margin-top: 8rpx;
  }

  .block {
    width: 100%;
    min-height: 90rpx;
    display: flex;
    background: #fff;
    padding: 0 30rpx;

    .left {
      width: 200rpx;
      height: 90rpx;
      display: flex;
      align-items: center;
    }

    .right {
      width: 480rpx;
      display: flex;
      flex-direction: column;
    }
  }

  .cell {
    width: 100%;
    height: 90rpx;
    background: #fff;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    display: flex;
    align-items: center;
    font-size: 30rpx;
    letter-spacing: 1px;
    color: #333333;
  }
</style>
